<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>酷我音乐-无损音质正版在线试听网站</title>
</head>
<link rel="shortcut icon" href="./kuwo.ico" type="image/x-icon">
<link rel="stylesheet" href="./layui/css/layui.css">
<link rel="stylesheet" href="./css/base.css">
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./css/haed&end.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/c/font_3792572_lpoogn40ahe.css">
<script src="./js/replace.js"></script>
<script src="./js/jQuery.js"></script>
<script src="./layui/layui.js"></script>
<script src="./js/lazy-load.js"></script>

<body>

    <!-- 头部 -->
    <div class="ku-haeder">
        <ul class="layui-nav wrappper" lay-filter="">
            <h1 class="ku-logo"></h1>
            <li class="layui-nav-item layui-this"><a href="">发现音乐</a></li>
            <li class="layui-nav-item"><a href="">下载客户端</a></li>
            <li class="layui-nav-item"><a href="">音乐现场</a></li>
            <li class="layui-nav-item"><a href="">VIP会员</a></li>
            <li class="layui-nav-item"><a href="">酷我畅听</a></li>

            <li class="layui-nav-item">
                <a href="javascript:;">更多</a>
                <dl class="layui-nav-child"> <!-- 二级菜单 -->
                    <dd><a href="">酷我音乐人</a></dd>
                </dl>
            </li>

            <div class="kw-haeder-right">
                <div class="ku-inp">
                    <i class="iconfont icon-icon-test2"></i>
                    <input type="text" name="" placeholder="搜索音乐/MV/歌单/歌手" id="ku-input">
                </div>
                <div class="kw-login">
                    <span>登录</span>
                    /
                    <span>注册</span>
                </div>
            </div>

        </ul>
    </div>



    <!-- 导航 -->
    <ul class="ku-nav wrappper">
        <li class="layui-this"><span>推荐</span></li>
        <li><span>排行榜</span></li>
        <li><span>歌手</span></li>
        <li><span>歌单</span></li>
        <li><span>MV</span></li>
    </ul>


    <!-- 轮播图 -->
    <div class="ku-carousel wrappper">
        <div class="layui-carousel" id="test1">
            <div carousel-item class="carousel-main">
            </div>

            <ul class="carousel-bg">
                <li>
                    <i class="iconfont icon-bg-win"></i>
                    下载pc端
                </li>
                <b></b>
                <li>
                    <i class="iconfont icon-anzhuo"></i>
                    下载Android版
                </li>
                <b></b>
                <li>
                    <i class="iconfont icon-pingguo"></i>
                    下载iPhone版
                </li>
                <b></b>
                <li>
                    <i class="iconfont icon-diannao"></i>
                    下载其它版本
                </li>
            </ul>

        </div>
    </div>


    <!-- 推荐歌单 -->
    <div class="ku-playlist wrappper">
        <div class="layui-tab">
            <ul class="layui-tab-title tab-playlist">
                <h2>推荐歌单</h2>
                <li class="layui-this"><span>每日推荐</span></li>
                <li><span>翻唱</span></li>
                <li><span>网络</span></li>
                <li><span>伤感</span></li>
                <li><span>欧美</span></li>
                <p class="ku-sings">更多<i class="iconfont icon-arrow-right"></i></p>
            </ul>
            <div class="layui-tab-content">

                <!-- loading -->
                <div class="loading">
                    <span class="loader"></span>
                </div>

                <div class="layui-tab-item layui-show">
                    <div class="playlist"></div>
                </div>
                <div class="layui-tab-item">
                    <div class="playlist"></div>
                </div>
                <div class="layui-tab-item">
                    <div class="playlist"></div>
                </div>
                <div class="layui-tab-item">
                    <div class="playlist"></div>
                </div>
                <div class="layui-tab-item">
                    <div class="playlist"></div>
                </div>
            </div>
        </div>
    </div>


    <!-- 排行榜 -->
    <div class="ku-ranking wrappper">

        <div class="ranking-title">
            <h2>排行榜</h2>
            <p class="ku-sings"><span>更多</span> <i class="iconfont icon-arrow-right"></i></p>
        </div>

        <div class="ranking-list">

            <!-- loading -->
            <div class="loading">
                <span class="loader"></span>
            </div>

            <div class="bang">
            </div>

            <div class="bang">
            </div>

            <div class="bang">
            </div>

            <div class="bang">
            </div>

            <div class="bang">
            </div>
        </div>

    </div>



    <!-- 歌手推荐 -->
    <div class="ku-singer wrappper">

        <div class="layui-tab">
            <ul class="layui-tab-title tab-singer">
                <h2>歌手推荐</h2>
                <li class="layui-this"><span>华语</span></li>
                <li><span>欧美</span></li>
                <li><span>日韩</span></li>
                <li><span>组合</span></li>
                <p class="ku-sings">更多<i class="iconfont icon-arrow-right"></i></p>
            </ul>
            <div class="layui-tab-content">

                <div class="layui-tab-item layui-show">
                    <div class="singer">

                        <!-- loading -->
                        <div class="loading">
                            <span class="loader"></span>
                        </div>


                        <ul class="singer-list"></ul>
                    </div>
                </div>
                <div class="layui-tab-item">
                    <div class="singer">
                        <ul class="singer-list"></ul>
                    </div>
                </div>
                <div class="layui-tab-item">
                    <div class="singer">
                        <ul class="singer-list"></ul>
                    </div>
                </div>
                <div class="layui-tab-item">
                    <div class="singer">
                        <ul class="singer-list"></ul>
                    </div>
                </div>
            </div>
        </div>
    </div>



    <!-- 尾部 -->
    <div class="ku-end">
        <div class="ku-server">
            <div class="server wrappper">
                <div class="server-one">
                    <h4>下载酷我音乐客户端</h4>
                    <ul>
                        <li>
                            <i class="iconfont icon-bg-win"></i>
                            <p>PC版</p>
                        </li>

                        <li>
                            <i class="iconfont icon-anzhuo"></i>
                            <p>Android</p>
                        </li>

                        <li>
                            <i class="iconfont icon-pingguo"></i>
                            <p>iPhone版</p>
                        </li>
                    </ul>
                </div>

                <div class="server-two">
                    <h4>协议与声明</h4>
                    <div class="tit">
                        <p>用户服务协议</p>
                        <p>免责声明</p>
                        <p>用户权限</p>
                    </div>
                    <div class="tit">
                        <p>儿童隐私政策</p>
                        <p>隐私政策</p>
                        <p>权利声明</p>
                    </div>
                </div>

                <div class="server-three">
                    <h4>其他</h4>
                    <div class="tit">
                        <p>联系我们</p>
                        <p>诚聘英才</p>
                        <p>腾讯音乐</p>
                    </div>
                    <div class="tit">
                        <p>广告服务</p>
                    </div>
                </div>

                <div class="server-four">
                    <h4>合作连接</h4>
                    <div class="tit">
                        <p>QQ音乐</p>
                    </div>
                    <div class="tit">
                        <p>酷狗听书</p>
                    </div>
                </div>

            </div>

        </div>

        <div class="ku-copyright">
            <div class="copyright wrappper">
                <p>
                    北京酷我科技有限公司版权所有 丨 网络文化经营许可证：
                    <span>京网文[2021]2071-554号</span> 丨
                    <span>信息网络传播视听节目许可证0109362号</span> 丨
                    增值电信业务经营许可证：
                    <sapn>京ICP证060261号</sapn>
                </p>

                <p> <span>广播电视节目制作经营许可证京字第02037号</span> 丨
                    <span>营业性演出许可证京市演1574</span> 丨
                    <span>京公网安备11010502030216号</span> 丨
                    <span>京ICP备09014827号</span> 丨
                    <span>互联网宗教信息服务许可证：京（2023）0000013</span>
                </p>

                <p data-v-2db74cdb="">
                    应用版本：10.3.4.0 丨
                    开发者：北京酷我科技有限公司 丨
                    举报电话：010-87939949丨
                    举报邮箱：support@kuwo.cn 丨
                    <span>未成年人监督举报入口</span> 丨
                    <span>网上有害信息举报专区</span>
                </p>
            </div>
        </div>

    </div>


    <!-- 播放器 -->
    <div class="ku-playControl">
        <div class="playControl">
            <div class="ku-song">
                <div class="pic">
                    <img src="http://kwimg2.kuwo.cn/star/upload/37/25/1633954819501_.png" alt="" id="music-pic">
                </div>
                <div class="text">
                    <div class="tit">
                        <p id="music-name">酷我音乐-陪着我·不要停</p>
                        <span id="music-date">00:00/00:00</span>
                    </div>
                    <div class="progress">
                        <span></span>
                        <input type="range" name="" id="progress" width="370" value="0" class="">

                        <!-- 音乐 -->
                        <audio class="music"
                            src="https://et-sycdn.kuwo.cn/3b9770a8ab10c73104720dd538474a09/644f6c49/resource/n2/64/64/3436913159.mp3"></audio>


                    </div>
                </div>
            </div>
            <div class="isplay">
                <div id="pre">
                    <i class="iconfont icon-zuoqiege"></i>
                </div>
                <div class="play" id="play">
                    <i class="iconfont icon-bofang-01"></i>
                </div>
                <div id="next">
                    <i class="iconfont icon-youqiege"></i>

                </div>
            </div>
            <div class="control">
                <div class="icon">
                    <i class="iconfont icon-shoucang"></i>
                    <i class="iconfont icon-xiazai"></i>
                    <i class="iconfont icon-review"></i>
                    <i class="iconfont icon-24gl-repeat2"></i>
                    <i class="iconfont icon-yinleliebiao"></i>
                </div>

                <div class="song-type">
                    高品
                    <i class="iconfont icon-arrow-down"></i>
                </div>

                <div class="isvolume">
                    <i class="iconfont icon-24gl-volumeMiddle"></i>
                    <div class="volume">
                        <span></span>
                        <input type="range" name="" width="83" id="volume" class="volume">
                    </div>
                </div>

            </div>

            <div class="islook">
                <i class="iconfont icon-24gl-unlock4"></i>
            </div>

        </div>
    </div>

    <script src="./js/index.js"></script>

    <script src="./js/music.js"></script>

</body>

</html>